<template>
	<view>
		<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			bottom='152'>
			<view class="item-box">
				<view class="logo-box">
					<view class="logo-title">保证金一览表</view>
					<image class="logo" src="@/static/home/subpage/guarantee-logo.png" mode="widthFix"></image>
				</view>
				<view class="item">
					<view class="table-box">
						<view class="table">
							<view class="tr">
								<view class="tl">品种</view>
								<view class="tl">
									<text>1手保证金</text>
									<image @click="isexplain = true" src="@/static/home/subpage/query.png"></image>
								</view>
								<view class="tl">保证金比例</view>
								<view class="tl">杠杆倍数</view>
							</view>
							<block v-for="(item, index) in codomainList" :key="index">
								<block v-if="item.list.length != 0">
									<view class="title">{{ item.label }}</view>
									<view class="box">
										<view v-for="(listItem, listIndex) in item.list" :key="listIndex">
											<view
												:class="['row', listItem.margin >= Number(marginNumber) - 100 && listItem.margin <= Number(marginNumber) + 100 ? 'highlight' : '']">
												<view class="tl">{{ listItem.breedName }}</view>
												<view class="tl">{{ listItem.margin }}</view>
												<view class="tl">{{ listItem.longMarginRatio * 100 + '%' }}</view>
												<view class="tl">{{ listItem.lever }}</view>
											</view>
										</view>
									</view>
								</block>
							</block>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="bottom-sx">
			<view class="flex">
				<input type="digit" v-model="search" class="ipt" placeholder-class="pipt"
					placeholder="输入一手保证金投资金融，查看相关品种">
				<view class="filter" @click="searchChange()">筛选</view>
			</view>
		</view>

		<!-- 保证金说明 -->
		<view class="explain-modal" @touchmove.stop.prevent :hidden="!isexplain">
			<view class="shade"></view>
			<view class="explain-box">
				<view class="caption">保证金说明</view>
				<view class="info">
					<text>小贴士:交易1手需要多少资金?交易1手需要的资金称为1手“保证金"
						保证金计算方式:1手保证金=最新价*交易单位*报价单位*保证金率
					</text>
					<text>
						*交易所和期货公司会根据市场风险动态调整保证金率，请以期货公司结算单为准
					</text>
				</view>
				<view class="know" @click="isexplain = false">我知道了</view>
			</view>
		</view>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			isexplain: false,
			list: [],
			codomainList: [],
			search: null,
			marginNumber: 0,
		};
	},
	onLoad(options) {
		this.margin()
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			this.mescroll.resetUpScroll()
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			setTimeout(() => {
				this.mescroll.endSuccess(9, false);// 加载成功
			}, 1500)
		},

		// 获取数据
		margin() {
			this.$request({
				url: 'https://api.quheqh.cn/api/v2/datacenter/app/futures/margin.html',
				method: 'get',
				successCb: (res) => {
					let list = res.data.data
					let blankList = []
					for (let i = 0; i < list.length; i++) {
						blankList[i] = {
							breedName: list[i].productName,
							margin: list[i].margin,
							longMarginRatio: list[i].longMarginRatio,
							lever: (1 / list[i].longMarginRatio).toFixed(2)
						}
					}
					for (let i = 0; i < blankList.length - 1; i++) {
						for (let j = 0; j < blankList.length - 1 - i; j++) {
							if (blankList[j].margin > blankList[j + 1].margin) {
								let temp = blankList[j];
								blankList[j] = blankList[j + 1];
								blankList[j + 1] = temp;
							}
						}

					}
					this.list = blankList
					this.renderRankTables()
				},
				failCb(e) {
					uni.hideLoading();
					// this.mescroll.endErr();
					console.log(e);
					uni.showToast({
						title: e.data.msg || '服务器异常',
						icon: "none",
						duration: 2000,
					});
				}
			});
		},

		// 数据处理
		renderRankTables() {
			let underThreeThousandIndex = 0
			let maxNumber = Math.ceil(this.list[this.list.length - 1].margin / 1000)
			let codomainList = codomainList = [
				{
					label: '一手0-3000',
					minValue: 0,
					maxValue: 3000,
					list: []
				}
			]
			if (maxNumber > 3) {
				for (let i = 4; i < maxNumber; i++) {
					codomainList.push({
						label: '一手' + i * 1000 + '-' + (i + 1) * 1000,
						minValue: i * 1000,
						maxValue: (i + 1) * 1000,
						list: [],
					})
				}
			}
			for (let i = 0; i < this.list.length; i++) {
				for (let j = 0; j < codomainList.length; j++) {
					if (this.list[i].margin >= codomainList[j].minValue && this.list[i].margin < codomainList[j].maxValue) {
						codomainList[j].list.push(this.list[i])
						codomainList[j].index = i
					}
				}

			}
			let blankList = []
			for (let i = 0; i < codomainList.length; i++) {
				if (codomainList[i].list.length) {
					blankList.push(codomainList[i])
				}
			}
			this.codomainList = codomainList
		},

		searchChange() {
			this.marginNumber = this.search
		},
	}
}
</script>

<style lang="scss" scoped>
.logo-box {
	width: 750rpx;
	height: 220rpx;
	background: #EE5953;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	display: flex;
	justify-content: space-between;
	padding: 10rpx 32rpx;
	box-sizing: border-box;

	.logo-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 44rpx;
	}

	.logo {
		width: 272rpx;
		height: 200rpx;
	}

}

.item-box {
	.item {
		border-top: 2rpx solid #F6F7F9;
	}

	.title {
		height: 72rpx;
		background: #F6F7F9;
		font-size: 28rpx;
		color: #EE5953;
		line-height: 72rpx;
		padding: 0 24rpx;
	}

	.table {
		border-top: 0;
		border-top: 2rpx solid #F6F7F9;

		.tr {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// border-bottom: 2rpx solid #F6F7F9;
			padding: 30rpx 32rpx;

			.tl {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.6);

				& image {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}

		.box {
			padding: 0 32rpx 0 24rpx;

			.row {
				padding: 24rpx 20rpx;
				margin: 4rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F6F7F9;

				.tl {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}
			}

			.row:last-child {
				border-bottom: 0;
			}
		}

		.tl:nth-child(1) {
			width: 25%;
			justify-content: flex-start;
		}

		.tl:nth-child(2) {
			width: 26%;
			justify-content: center;
		}

		.tl:nth-child(3) {
			width: 26%;
			justify-content: center;
		}

		.tl:nth-child(4) {
			width: 23%;
			justify-content: flex-end;
		}
	}
}

.bottom-sx {
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: #fff;
	box-shadow: 0px 0 16rpx 2rpx rgba(51, 51, 51, 0.2);
	width: 100%;
	z-index: 9;

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;

		.ipt {
			width: 558rpx;
			height: 88rpx;
			background: #F4F5F7;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.8);
			padding: 22rpx 32rpx;
			box-sizing: border-box;
		}

		.pipt {
			color: rgba(0, 0, 0, 0.4);
		}

		.filter {
			width: 112rpx;
			height: 88rpx;
			background: #EE5953;
			border-radius: 16rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}

.explain-modal {
	.explain-box {
		position: fixed;
		left: 50%;
		top: 50%;
		width: 654rpx;
		padding: 48rpx 32rpx 32rpx;
		box-sizing: border-box;
		transform: translate(-50%, -50%);
		z-index: 100;
		background: #FFFFFF;
		border-radius: 16rpx;

		.caption {
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.8);
			text-align: center;
		}

		.info {
			font-size: 28rpx;
			font-weight: bold;
			color: rgba(0, 0, 0, 0.8);
			// min-height: 110rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			margin-top: 54rpx;
			line-height: 44rpx;

			& text:last-child {
				color: #FF3B30;
				padding-top: 44rpx;
				display: block;
			}
		}

		.know {
			height: 88rpx;
			background: #EE5953;
			border-radius: 16rpx;
			width: 100%;
			text-align: center;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 64rpx;
		}
	}
}

.highlight {
	border: 1rpx solid #EE5953 !important;

	.tl {
		color: #EE5953 !important;
	}
}
</style>
